<!DOCTYPE html>
<!-- saved from url=(0059)file:///C:/Users/antga/Desktop/web/index.html#!/pages/index -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta content="telephone=no" name="format-detection">

  <title>test</title>
  <style>
      html, body, #app {height: 100%;}
  </style>
<style type="text/css">
    .wetoast {
        display: none;
    }
    .wetoast_show {
        display: block;
    }
    .wetoast__mask {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
    .wetoast__bd {
        opacity: 0;
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 5000;
        min-width: 8.4em;
        min-height: 8.4em;
        max-width: 70%;
        top: 140px;
        left: 50%;
        padding: 15px;
        box-sizing: border-box;
        transform: translateX(-50%);
        background: rgba(40, 40, 40, 0.75);
        border-radius: 5px;
        color: #FFFFFF;
        word-wrap: break-word;
        word-break: break-all;
        align-items: center;
        justify-content: space-around;
    }
    .wetoast__bd__img {
        margin-top: 3px;
    }
    .wetoast__bd__img_desc {
        width: 55px;
        height: 55px;
        vertical-align: middle;
    }
    .wetoast__bd__title {
        margin: 3px 0;
        font-size: 1.2em;
    }


body{margin:0px;padding:0px;background-color:#f0eff5}


.tab_item{height:100%}page,.body{height:100%;font-family:'\5FAE\8F6F\96C5\9ED1', arial;background-color:#f0eff5}


.page_chat{height:100%;background-color:#ededed}


.message{padding-left:10px;padding-right:10px;background-color:#fff}.message .item{height:68px;border-bottom:1px solid #dad9d6;box-sizing:border-box;padding:10px;position:relative}.message .item .header{width:48px;height:48px;position:absolute;overflow:hidden;border-radius:5px}.message .item .header .img{width:50px;height:50px}.message .item .content{margin-left:60px}.message .item .content .name{color:#000;font-size:16.5px;padding:5px 0}.message .item .content .lastmsg{overflow:hidden;height:16px;color:#7b7b7b;font-size:13px;padding-top:2.5px}


.discovery{background-color:#f0eff5;height:100%;padding-top:0}


.contact .toplist{padding-left:10px;padding-right:10px;background-color:#fff}.contact .toplist .item{height:55px;border-top:1px solid #dad9d6;box-sizing:border-box;padding:10px;position:relative}.contact .toplist .item .header{width:35px;height:35px;position:absolute;overflow:hidden;border-radius:5px}.contact .toplist .item .header .img{width:35px;height:35px}.contact .toplist .item .content{margin-left:45px;margin-top:5px}.contact .toplist .item .content .name{color:#232323;font-size:16px;padding:5px 0}.contact .friends{padding-left:10px;padding-right:10px;padding-bottom:50px;background:white}.contact .friends .sep{background-color:#f1f0f6;color:#7e7d83;height:22.5px;padding:3px 0 5px 10px;font-size:13px;font-weight:bold;box-sizing:border-box;margin-left:-10px;margin-right:-10px}.contact .friends .user{height:55px;border-bottom:1px solid #dad9d6;box-sizing:border-box;padding:10px;position:relative}.contact .friends .user .user_icon{width:35px;height:35px;position:absolute;border-radius:5px}.contact .friends .user .user_name{margin-left:45px;margin-top:5px;font-size:16.5px;line-height:35px}.contact .friends .total{height:60px;background-color:#eee;margin-left:-10px;margin-right:-10px;text-align:center;line-height:70px;color:#7b7b7b;font-size:16.5px}


.me{background-color:#f0eff5;height:100%;padding-top:20px}.me .item{background-color:#fff;height:50px;position:relative;box-sizing:border-box;padding:7.5px 12.5px;border-bottom:1px solid #eeeeee}.me .item.info{height:80px;position:relative}.me .item.info .me_icon{width:65px;height:65px;margin-left:0;border-radius:5px;position:absolute}.me .item.info .qr_code{position:absolute;right:30px;width:25px;height:25px;margin-top:-32.5px}.me .item.info .arrow_left{position:absolute;right:10px;width:15px;height:20px;margin-top:-30px}.me .item.info .wechat_info{padding-left:75px;padding-top:12.5px}.me .item.info .wechat_info .wechat_name{font-size:16px}.me .item.info .wechat_info .wechat_id{margin-top:10px;color:#333;font-size:13px}


.tab{color:#7b7b7b;position:fixed;bottom:0;height:50px;width:100%;border-top:1px solid #dad9d6;background-color:#f7f7f7;font-size:12px;white-space:nowrap}.tab .tab_item{display:inline-block;width:25%;text-align:center}.tab .tab_item.active{color:#13b113}.tab .icon{width:30px;height:30px;display:block;margin:auto}.tab .title{padding-top:3px;display:block}


.input{color:#7b7b7b;position:fixed;bottom:0;height:50px;width:100%;border-top:1px solid #d8d8d8;background-color:#ededed;font-size:11px}.input .input_layout{position:relative}.input .input_layout .input_icon{position:absolute;width:45px;height:45px}.input .input_layout .input_icon.voice{left:10px}.input .input_layout .input_icon.face{right:60px}.input .input_layout .input_icon.plus{right:10px}.input .input_layout .input_text{border-bottom:1px solid #d8d8d8;margin-left:60px;margin-right:120px;height:40px;font-size:16px;color:#000}.input .input_layout .input_text.focus{border-bottom:1px solid #9bb793}.input .input_layout .send{background-color:#14b012;display:inline-block;box-sizing:border-box;position:absolute;border:1px solid #378c37;border-radius:2.5px;right:10px;width:45px;height:37px;line-height:36px;color:white;text-align:center;font-size:15px;margin-top:4px}.input .input_layout .send.hidden{display:none}


.chartboard{background-color:#ededed;padding-bottom:60px}.chartboard.fixed{position:fixed;left:0;right:0;overflow-y:scroll}.chartboard .msgarea{padding:10px 5px}.chartboard .msgarea .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.chartboard .msgarea .clearfix{height:1%}.chartboard .msgarea .msg{border:1px solid #d8d8d8;font-size:16px;display:inline-block;padding:7px 10px;max-width:225px;border-radius:7.5px}.chartboard .msgarea .icon{width:35px;height:35px}.chartboard .msgarea.fromme .msg{background-color:#9fe757;float:right;margin-right:5px}.chartboard .msgarea.fromme .icon{float:right;margin-right:5px}.chartboard .msgarea.other .msg{background-color:#fff;float:left;margin-left:5px}.chartboard .msgarea.other .icon{float:left;margin-left:5px}


.list{margin-top:20px;background-color:#fff;border-bottom:1px solid #eee}.list .item{height:50px;position:relative;box-sizing:border-box;padding:10px;border-bottom:1px solid #eee}.list .item .icon{width:30px;height:30px;position:absolute;margin-left:7.5px}.list .item .arrow_left{position:absolute;right:10px;width:15px;height:20px;margin-top:-16px}.list .item .title{padding:9px 0 0 50px;display:block;font-size:16.5px}


.alpha{position:fixed;right:5px;width:15px;top:50px}.alpha .item{display:block;font-size:11px;color:#333;font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei;padding:1px}


.list{margin-top:20px;background-color:#fff;border-bottom:1px solid #eee}.list .item{height:50px;position:relative;box-sizing:border-box;padding:10px;border-bottom:1px solid #eee}.list .item .icon{width:30px;height:30px;position:absolute;margin-left:7.5px}.list .item .arrow_left{position:absolute;right:10px;width:15px;height:20px;margin-top:-16px}.list .item .title{padding:9px 0 0 50px;display:block;font-size:16.5px}


</style><style type="text/css">
    .wetoast {
        display: none;
    }
    .wetoast_show {
        display: block;
    }
    .wetoast__mask {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
    .wetoast__bd {
        opacity: 0;
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 5000;
        min-width: 8.4em;
        min-height: 8.4em;
        max-width: 70%;
        top: 140px;
        left: 50%;
        padding: 15px;
        box-sizing: border-box;
        transform: translateX(-50%);
        background: rgba(40, 40, 40, 0.75);
        border-radius: 5px;
        color: #FFFFFF;
        word-wrap: break-word;
        word-break: break-all;
        align-items: center;
        justify-content: space-around;
    }
    .wetoast__bd__img {
        margin-top: 3px;
    }
    .wetoast__bd__img_desc {
        width: 55px;
        height: 55px;
        vertical-align: middle;
    }
    .wetoast__bd__title {
        margin: 3px 0;
        font-size: 1.2em;
    }


body{margin:0px;padding:0px;background-color:#f0eff5}


.tab_item{height:100%}page,.body{height:100%;font-family:'\5FAE\8F6F\96C5\9ED1', arial;background-color:#f0eff5}


.page_chat{height:100%;background-color:#ededed}


.message{padding-left:10px;padding-right:10px;background-color:#fff}.message .item{height:68px;border-bottom:1px solid #dad9d6;box-sizing:border-box;padding:10px;position:relative}.message .item .header{width:48px;height:48px;position:absolute;overflow:hidden;border-radius:5px}.message .item .header .img{width:50px;height:50px}.message .item .content{margin-left:60px}.message .item .content .name{color:#000;font-size:16.5px;padding:5px 0}.message .item .content .lastmsg{overflow:hidden;height:16px;color:#7b7b7b;font-size:13px;padding-top:2.5px}


.discovery{background-color:#f0eff5;height:100%;padding-top:0}


.contact .toplist{padding-left:10px;padding-right:10px;background-color:#fff}.contact .toplist .item{height:55px;border-top:1px solid #dad9d6;box-sizing:border-box;padding:10px;position:relative}.contact .toplist .item .header{width:35px;height:35px;position:absolute;overflow:hidden;border-radius:5px}.contact .toplist .item .header .img{width:35px;height:35px}.contact .toplist .item .content{margin-left:45px;margin-top:5px}.contact .toplist .item .content .name{color:#232323;font-size:16px;padding:5px 0}.contact .friends{padding-left:10px;padding-right:10px;padding-bottom:50px;background:white}.contact .friends .sep{background-color:#f1f0f6;color:#7e7d83;height:22.5px;padding:3px 0 5px 10px;font-size:13px;font-weight:bold;box-sizing:border-box;margin-left:-10px;margin-right:-10px}.contact .friends .user{height:55px;border-bottom:1px solid #dad9d6;box-sizing:border-box;padding:10px;position:relative}.contact .friends .user .user_icon{width:35px;height:35px;position:absolute;border-radius:5px}.contact .friends .user .user_name{margin-left:45px;margin-top:5px;font-size:16.5px;line-height:35px}.contact .friends .total{height:60px;background-color:#eee;margin-left:-10px;margin-right:-10px;text-align:center;line-height:70px;color:#7b7b7b;font-size:16.5px}


.me{background-color:#f0eff5;height:100%;padding-top:20px}.me .item{background-color:#fff;height:50px;position:relative;box-sizing:border-box;padding:7.5px 12.5px;border-bottom:1px solid #eeeeee}.me .item.info{height:80px;position:relative}.me .item.info .me_icon{width:65px;height:65px;margin-left:0;border-radius:5px;position:absolute}.me .item.info .qr_code{position:absolute;right:30px;width:25px;height:25px;margin-top:-32.5px}.me .item.info .arrow_left{position:absolute;right:10px;width:15px;height:20px;margin-top:-30px}.me .item.info .wechat_info{padding-left:75px;padding-top:12.5px}.me .item.info .wechat_info .wechat_name{font-size:16px}.me .item.info .wechat_info .wechat_id{margin-top:10px;color:#333;font-size:13px}


.tab{color:#7b7b7b;position:fixed;bottom:0;height:50px;width:100%;border-top:1px solid #dad9d6;background-color:#f7f7f7;font-size:12px;white-space:nowrap}.tab .tab_item{display:inline-block;width:25%;text-align:center}.tab .tab_item.active{color:#13b113}.tab .icon{width:30px;height:30px;display:block;margin:auto}.tab .title{padding-top:3px;display:block}


.input{color:#7b7b7b;position:fixed;bottom:0;height:50px;width:100%;border-top:1px solid #d8d8d8;background-color:#ededed;font-size:11px}.input .input_layout{position:relative}.input .input_layout .input_icon{position:absolute;width:45px;height:45px}.input .input_layout .input_icon.voice{left:10px}.input .input_layout .input_icon.face{right:60px}.input .input_layout .input_icon.plus{right:10px}.input .input_layout .input_text{border-bottom:1px solid #d8d8d8;margin-left:60px;margin-right:120px;height:40px;font-size:16px;color:#000}.input .input_layout .input_text.focus{border-bottom:1px solid #9bb793}.input .input_layout .send{background-color:#14b012;display:inline-block;box-sizing:border-box;position:absolute;border:1px solid #378c37;border-radius:2.5px;right:10px;width:45px;height:37px;line-height:36px;color:white;text-align:center;font-size:15px;margin-top:4px}.input .input_layout .send.hidden{display:none}


.chartboard{background-color:#ededed;padding-bottom:60px}.chartboard.fixed{position:fixed;left:0;right:0;overflow-y:scroll}.chartboard .msgarea{padding:10px 5px}.chartboard .msgarea .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.chartboard .msgarea .clearfix{height:1%}.chartboard .msgarea .msg{border:1px solid #d8d8d8;font-size:16px;display:inline-block;padding:7px 10px;max-width:225px;border-radius:7.5px}.chartboard .msgarea .icon{width:35px;height:35px}.chartboard .msgarea.fromme .msg{background-color:#9fe757;float:right;margin-right:5px}.chartboard .msgarea.fromme .icon{float:right;margin-right:5px}.chartboard .msgarea.other .msg{background-color:#fff;float:left;margin-left:5px}.chartboard .msgarea.other .icon{float:left;margin-left:5px}


.list{margin-top:20px;background-color:#fff;border-bottom:1px solid #eee}.list .item{height:50px;position:relative;box-sizing:border-box;padding:10px;border-bottom:1px solid #eee}.list .item .icon{width:30px;height:30px;position:absolute;margin-left:7.5px}.list .item .arrow_left{position:absolute;right:10px;width:15px;height:20px;margin-top:-16px}.list .item .title{padding:9px 0 0 50px;display:block;font-size:16.5px}


.alpha{position:fixed;right:5px;width:15px;top:50px}.alpha .item{display:block;font-size:11px;color:#333;font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei;padding:1px}


.list{margin-top:20px;background-color:#fff;border-bottom:1px solid #eee}.list .item{height:50px;position:relative;box-sizing:border-box;padding:10px;border-bottom:1px solid #eee}.list .item .icon{width:30px;height:30px;position:absolute;margin-left:7.5px}.list .item .arrow_left{position:absolute;right:10px;width:15px;height:20px;margin-top:-16px}.list .item .title{padding:9px 0 0 50px;display:block;font-size:16.5px}


</style></head>
<body>
  <div id="app">
    <div class="body">
        <div class="tab_item tab_message" style="display: none;">
            <div class="message">
        <div>
            <div class="item">
                <div class="header">
                    <img class="img" src="./test_files/mayun.png">
                </div>
                <div class="content">
                    <div class="name">马云</div>
                    <div class="lastmsg">你懂的，嘿嘿。</div>
                </div>
            </div>
        </div><div>
            <div class="item">
                <div class="header">
                    <img class="img" src="./test_files/dinglei.png">
                </div>
                <div class="content">
                    <div class="name">丁磊</div>
                    <div class="lastmsg">因为他会飞。</div>
                </div>
            </div>
        </div><div>
            <div class="item">
                <div class="header">
                    <img class="img" src="./test_files/mahuateng.png">
                </div>
                <div class="content">
                    <div class="name">马化腾</div>
                    <div class="lastmsg">300股，接着。</div>
                </div>
            </div>
        </div>
    </div>
        </div>
        <div class="tab_item tab_contact" style="display: none;">
            <div class="contact">
        <div class="toplist">
            <div>
                <div class="item">
                    <div class="header">
                        <img class="img" width="70rpx" height="70rpx" src="./test_files/new_friend.png">
                    </div>
                    <div class="content">
                        <div class="name">新的朋友</div>
                    </div>
                </div>
            </div><div>
                <div class="item">
                    <div class="header">
                        <img class="img" width="70rpx" height="70rpx" src="./test_files/group_chat.png">
                    </div>
                    <div class="content">
                        <div class="name">群聊</div>
                    </div>
                </div>
            </div><div>
                <div class="item">
                    <div class="header">
                        <img class="img" width="70rpx" height="70rpx" src="./test_files/tag.png">
                    </div>
                    <div class="content">
                        <div class="name">标签</div>
                    </div>
                </div>
            </div><div>
                <div class="item">
                    <div class="header">
                        <img class="img" width="70rpx" height="70rpx" src="./test_files/public.png">
                    </div>
                    <div class="content">
                        <div class="name">公众号</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="friends">
            <div>
                <div class="sep">C</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/caixia.png">
                         <span class="user_name">彩霞</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">D</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/dinglei.png">
                         <span class="user_name">丁磊</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">E</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/ertai.png">
                         <span class="user_name">尔泰</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/erkang.png">
                         <span class="user_name">尔康</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">F</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/fuheng.png">
                         <span class="user_name">傅恒</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/fujin.png">
                         <span class="user_name">福晋</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/fulun.png">
                         <span class="user_name">福伦</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">H</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/huanghou.png">
                         <span class="user_name">皇后</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/huangshang.png">
                         <span class="user_name">皇上</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">J</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/jingsuo.png">
                         <span class="user_name">金锁</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">L</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/linfei.png">
                         <span class="user_name">令妃</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/liuhong.png">
                         <span class="user_name">柳红</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/liuqing.png">
                         <span class="user_name">柳青</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/liuqiangdong.png">
                         <span class="user_name">刘强东</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/liyanhong.png">
                         <span class="user_name">李彦宏</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/liuchuanzhi.png">
                         <span class="user_name">刘传志</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/laofuoye.png">
                         <span class="user_name">老佛爷</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">M</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/mingyue.png">
                         <span class="user_name">明月</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/mayun.png">
                         <span class="user_name">马云</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/mahuateng.png">
                         <span class="user_name">马化腾</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">Q</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/qinger.png">
                         <span class="user_name">晴儿</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">R</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/rongmeme.png">
                         <span class="user_name">蓉嚒嚒</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">S</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/saiya.png">
                         <span class="user_name">塞雅</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">W</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/wuage.png">
                         <span class="user_name">五阿哥</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">X</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/xiangfei.png">
                         <span class="user_name">香妃</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/xiaozhuozi.png">
                         <span class="user_name">小卓子</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/xiaoyanzi.png">
                         <span class="user_name">小燕子</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/xiaojian.png">
                         <span class="user_name">萧剑</span>
                    </div>
                </div><div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/xiaodengzi.png">
                         <span class="user_name">小邓子</span>
                    </div>
                </div>
            </div><div>
                <div class="sep">Z</div>
                <div>
                    <div class="user">
                         <img class="user_icon" src="./test_files/ziwei.png">
                         <span class="user_name">紫薇</span>
                    </div>
                </div>
            </div>
            <div class="total">30位联系人</div>
        </div>
        <div class="alpha">
        <div>
            <span class="item">★</span>
        </div><div>
            <span class="item">A</span>
        </div><div>
            <span class="item">B</span>
        </div><div>
            <span class="item">C</span>
        </div><div>
            <span class="item">D</span>
        </div><div>
            <span class="item">E</span>
        </div><div>
            <span class="item">F</span>
        </div><div>
            <span class="item">G</span>
        </div><div>
            <span class="item">H</span>
        </div><div>
            <span class="item">I</span>
        </div><div>
            <span class="item">J</span>
        </div><div>
            <span class="item">K</span>
        </div><div>
            <span class="item">L</span>
        </div><div>
            <span class="item">M</span>
        </div><div>
            <span class="item">N</span>
        </div><div>
            <span class="item">O</span>
        </div><div>
            <span class="item">P</span>
        </div><div>
            <span class="item">Q</span>
        </div><div>
            <span class="item">R</span>
        </div><div>
            <span class="item">S</span>
        </div><div>
            <span class="item">T</span>
        </div><div>
            <span class="item">U</span>
        </div><div>
            <span class="item">V</span>
        </div><div>
            <span class="item">W</span>
        </div><div>
            <span class="item">X</span>
        </div><div>
            <span class="item">Y</span>
        </div><div>
            <span class="item">Z</span>
        </div><div>
            <span class="item">#</span>
        </div>
    </div>
    </div>
        </div>
        <div class="tab_item tab_discovery" style="display: none;">
            <div class="discovery">

        <!--
        <moment v-bind:list.once="dMoment" />
        <action v-bind:list.once="dShopping" />
        <drift v-bind:list.once="dDrift" />
        <shopping v-bind:list.once="dAction" />
        -->


            <div key="index">
                <div class="list">
        <div key="key">
            <div class="item">
        <img class="icon" src="./test_files/moment.png">
        <span class="title">朋友圈</span>
        <img class="arrow_left" src="./test_files/arrow_left.png">
    </div>
        </div>
    </div>
            </div><div key="index">
                <div class="list">
        <div key="key">
            <div class="item">
        <img class="icon" src="./test_files/shopping.png">
        <span class="title">购物</span>
        <img class="arrow_left" src="./test_files/arrow_left.png">
    </div>
        </div>
    </div>
            </div><div key="index">
                <div class="list">
        <div key="key">
            <div class="item">
        <img class="icon" src="./test_files/drift.png">
        <span class="title">漂流瓶</span>
        <img class="arrow_left" src="./test_files/arrow_left.png">
    </div>
        </div>
    </div>
            </div><div key="index">
                <div class="list">
        <div key="key">
            <div class="item">
        <img class="icon" src="./test_files/scan.png">
        <span class="title">扫一扫</span>
        <img class="arrow_left" src="./test_files/arrow_left.png">
    </div>
        </div><div key="key">
            <div class="item">
        <img class="icon" src="./test_files/shake.png">
        <span class="title">摇一摇</span>
        <img class="arrow_left" src="./test_files/arrow_left.png">
    </div>
        </div>
    </div>
            </div>
            <!--block wx:for="{{list}}" wx:key="index" wx:for-index="index" wx:for-item="item">
                <view class="item" bindtap="click({{index}}, {{item}})">
                    <image class="icon" src="{{item.icon}}"></image>
                    <text class="title">{{item.title}}</text>
                    <image class="arrow_left" src="../images/arrow_left.png"></image>
                </view>
            </block-->
    </div>
        </div>
        <div class="tab_item tab_me" style="">
            <div class="me">
        <div class="info item">
            <img class="me_icon" src="./test_files/myheader.png">
            <div class="wechat_info">
                <div class="wechat_name">Abel</div>
                <div class="wechat_id">微信号：Abel</div>
            </div>
            <img class="qr_code" src="./test_files/qr_code.png">
            <img class="arrow_left" src="./test_files/arrow_left.png">
        </div>

        <div class="list">
        <div>
            <div class="item">
                <img class="icon" src="./test_files/album.png">
                <span class="title">相册</span>
                <img class="arrow_left" src="./test_files/arrow_left.png">
            </div>
        </div><div>
            <div class="item">
                <img class="icon" src="./test_files/collect.png">
                <span class="title">收藏</span>
                <img class="arrow_left" src="./test_files/arrow_left.png">
            </div>
        </div><div>
            <div class="item">
                <img class="icon" src="./test_files/wallet.png">
                <span class="title">钱包</span>
                <img class="arrow_left" src="./test_files/arrow_left.png">
            </div>
        </div><div>
            <div class="item">
                <img class="icon" src="./test_files/card.png">
                <span class="title">卡包</span>
                <img class="arrow_left" src="./test_files/arrow_left.png">
            </div>
        </div>
    </div>
        <div class="list">
        <div>
            <div class="item">
                <img class="icon" src="./test_files/setting.png">
                <span class="title">清除本地聊天记录</span>
                <img class="arrow_left" src="./test_files/arrow_left.png">
            </div>
        </div>
    </div>
        <div class="list">
        <div>
            <div class="item">
                <img class="icon" src="./test_files/emoji.png">
                <span class="title">表情</span>
                <img class="arrow_left" src="./test_files/arrow_left.png">
            </div>
        </div>
    </div>
    </div>
        </div>

        <div class="tab">
        <div class="tab_item tab_message">
            <img class="icon" src="./test_files/message.png">
            <span class="title">微信</span>
        </div>
        <div class="tab_item tab_contact">
            <img class="icon" src="./test_files/contact.png">
            <span class="title">通讯录</span>
        </div>
        <div class="tab_item tab_discovery">
            <img class="icon" src="./test_files/discovery.png">
            <span class="title">发现</span>
        </div>
        <div class="tab_item tab_me active">
            <img class="icon" src="./test_files/me_active.png">
            <span class="title">我</span>
        </div>
    </div>
        <div class="wetoast">
        <div class="wetoast__mask"></div>
        <div class="wetoast__bd" animation="">
            <div>
                <div class="wetoast__bd__img">
                    <img class="wetoast__bd__img_desc" src="./test_files/star.png" mode="scaleToFill">
                </div>
            </div>
            <div>
                <div class="wetoast__bd__title">表情</div>
            </div>
        </div>
    </div>
    </div>
    <script src="./test_files/index.js.下载"></script>
  </div>
<script src="./test_files/index.js.下载"></script>
</body></html>